import React from 'react';
import './prompt.less';

class Prompt extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Modal';
        this.state = {
            visible:false,
            value:""
        }
    }
    onOK(){/*获取外部confirm方法*/}
    onCancel(){/*获取外部cancel方法*/}
    show(obj){
        this.setState({
            visible:true,
            title:obj.title,
            value:obj.defaultValue,
        })
        this.onCancel=obj.cancel
        this.onOK=obj.confirm
    }
    close(){
        this.setState({
            visible:false
        })
    }
    handleCancel(){
        this.setState({
            visible:false
        })
        this.onCancel()
    }
    handleConfirm(){
        //this.props.handleConfirm()
        this.setState({
            visible:false
        })
        this.onOK()
    }
    handleInput(e){
        var value = e.target.value
        this.setState({
            value:value
        })
    }
    getNum(){
        return this.state.value
    }
    render() {
        var height=this.props.height
        var width=this.props.width
        return this.state.visible?<div className="prompt">
            <div className="modal-container" style={{
                width: width+"px",
                height: height+"px",
                marginTop: -height/2+"px",
                marginRight: -width/2+"px"}
                }>
                <div className="modal-head">
                    <div className="modal-title">{this.props.title||this.state.title}</div>
                </div>
                <div className="modal-body">
                    <input type={this.props.type} className="prompt-input" value={this.state.value} onChange={this.handleInput.bind(this)}/>
                </div>
                <div className="modal-bottom">
                    <input className="btn-cancel" type="button" value="取消" onClick={this.handleCancel.bind(this)}/>
                    <input className="btn-confirm" type="button" value="确定" onClick={this.handleConfirm.bind(this)}/>
                </div>
            </div>
            <div className="prompt-mask"></div>
        </div>:null
    }
}

Prompt.defaultProps={
    width: 400,
    height: 200,
    type:"text"
}

export default Prompt
